import {
  Avatar,
  Button,
  Card,
  Comment,
  Form,
  Input,
  List,
  message,
  Modal,
  Rate,
  Space,
  Tooltip,
} from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { connect, Link } from 'umi';
import { LikeFilled, LikeOutlined } from '@ant-design/icons';
import styles from './index.less';
import TextArea from 'antd/lib/input/TextArea';
import { addComments } from '@/services/ant-design-pro/comments';
import defaultUser from '@/assets/defaultUser.jpg';

const DEFAULT_PAGE_SIZE = 8;
const rateTips = ['毫无用处', '用处不大', '还行', '不错', '太棒了'];

const CommentList = (props) => {
  const { comments, resourceId } = props;
  const { isThumb } = false;
  const [rateModalOpen, setRateModalOpen] = useState(false);
  const [pageNum, setPageNum] = useState([1]);
  const [total, setTotal] = useState([0]);
  const [rate, setRate] = useState([5]);
  const [content, setContent] = useState('');

  const doSubmit = () => {
    const values = {
      linkId: resourceId,
      content: content,
      starts: rate,
    };
    addComment(values);
    setRateModalOpen(false);
  };

  const addComment = async (values) => {
    try {
      const res = await addComments({ ...values });
      message.success('评论成功');
      // console.log(res);
      // if (res.data !== resource) {
      //   setResource(res.data);
      // }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <Card
        title="评论"
        extra={
          <Button type={'primary'} onClick={() => setRateModalOpen(true)}>
            写评论
          </Button>
        }
      >
        <Modal
          title="请给资源评论"
          visible={rateModalOpen}
          onCancel={() => setRateModalOpen(false)}
          footer={
            <Button
              type="primary"
              onClick={doSubmit}
              // disabled={submitting}
              // loading={submitting}
            >
              提交
            </Button>
          }
        >
          <div>
            打分：
            <Rate
              tooltips={rateTips}
              allowClear={false}
              value={rate}
              onChange={(val) => setRate(val)}
            />
            <span style={{ marginLeft: 16 }}>{rateTips[rate - 1]}</span>
          </div>
          <div>
            内容：
            <TextArea
              rows={3}
              placeholder="请输入评论"
              onChange={(e) => {
                setContent(e.target.value);
              }}
            />
          </div>
        </Modal>
        <List
          rowKey="id"
          dataSource={comments}
          // split={false}
          // loading={true}
          pagination={{
            size: 'small',
            pageSize: DEFAULT_PAGE_SIZE,
            current: pageNum,
            showSizeChanger: false,
            hideOnSinglePage: true,
            total,
            onChange(newPageNum) {
              setPageNum(newPageNum);
            },
          }}
          renderItem={(item, index) => {
            return (
              <List.Item key={item.comment.id}>
                <Comment
                  actions={[
                    // <span onClick={() => doThumbUp(item._id, index)}>
                    <Space>
                      {item.isThumb ? <LikeFilled /> : <LikeOutlined />}
                      {item.comment.lkies ?? 0}
                    </Space>,
                    // </span>,
                  ]}
                  author={item.user.nikename}
                  avatar={
                    <Avatar
                      src={
                        item.user.avatar ? 'http://localhost:9999' + item.user?.avatar : defaultUser
                      }
                    />
                  }
                  content={<p>{item.comment.content}</p>}
                  datetime={
                    <>
                      <Tooltip title={moment(item.createAt).format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment(item.createAte).fromNow()}</span>
                      </Tooltip>
                      <Rate
                        allowHalf
                        disabled
                        className={styles.rank}
                        count={item.comment.starts}
                        defaultValue={item.comment.starts}
                      />
                    </>
                  }
                />
              </List.Item>
            );
          }}
        />
      </Card>
    </div>
  );
};

export default CommentList;
